<template>
  <div>
    <el-row>
        <el-col>
            <el-descriptions class="margin-top" title="IT技能" :column="1" :colon="false">
                <template slot="extra">
                    <!-- 添加按钮 -->
                    <el-button type="primary" size="small" icon="el-icon-plus" circle @click="add()"></el-button>
                </template>
                <el-descriptions-item label-class-name="my-label" label="◈" v-for="(it,index) in its" :key="it.id">
                    {{it.it}} 
                    <a icon="el-icon-edit" class="el-button" @click="updata(it.id,index)" id="updata"><span class="updatatext el-icon-edit"></span></a>
                    <a icon="el-icon-edit" class="el-button" @click="del(it.id)" id="delete"><span class="deletetext el-icon-delete"></span></a>
                </el-descriptions-item>
                
            </el-descriptions>
            <!-- 修改弹出框 -->
            <el-dialog
            title="updata"
            :center="true"
            :visible.sync="updatasync"
            width="30%"
            :before-close="handleClose">
                <!-- 弹出内容 -->
                <el-form  label-position="right" label-width="80px">
                    <el-input 
                    type="textarea"
                    prop="name"
                    autosize
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="updataits"></el-input>
                </el-form>
                
            
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancellation()">取 消</el-button>
                    <el-button type="primary" @click="updatait()">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 添加弹出框 -->
            <el-dialog
            title="add"
            :center="true"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
                <!-- 弹出内容 -->
                <!-- <el-form label-position="right" label-width="80px" :model="addit"> -->
                        <el-input
                        type="textarea"
                        autosize
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="addit"></el-input>
                <!-- </el-form> -->

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addits()">确 定</el-button>
            </span>
            </el-dialog>
        </el-col>
    </el-row>
  </div>
  
</template>
<style>
.el-descriptions-item {
    padding-right: 100px;
}
.deletetext{
    color: #fff;
    
}
.updatatext{
    color: #fff;
}
#delete{
    
    background-color: #f77;
    position: absolute; 
    right: 70px; 
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;padding-bottom: 0px;
    
}
#updata{
    position: absolute; 
    right: 40px; 
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;padding-bottom: 0px;
    background-color: #4af;
}
</style>

<script>
  export default {
    data() {
      return{
        updatasync: false,
        dialogVisible: false,
        its: [
            // {id:1,it:"掌握 HTML+CSS+DIV 布局，JavaScript 以及 DOM 解析，熟练运用 AJAX 技术以及 JQuery 库。掌握 vue 前端框架，并能熟练运用其中的 axios，ElementUI， 等进行开发。可熟练运用 Bootstrap，LayUI 等前端 UI 框架，进行前端开发"},
            // {id:2,it:" 理解 MVC 设计思想，熟练使用基于 Apache Tomcat 服务器的 JSP/Servlet 开发。"},
            // {id:3,it:"掌握 SpringMVC、MyBatis、SpringBoot、Spring.、Dubbo 等主流框架，能够熟练的运用 Spring 进行多层体系架构设计，并能通过 Spring 管理其它框架进行 Web 开发"},
            // {id:4,it:"熟练应用 IntelliJ Idea、MyEclipse、Eclipse、Git 等开发工具。"},
            // {id:5,it:"熟练运用 MySql、redis 等数据库"},
            // {id:6,it:"熟练使用 linux 操作系统的常见命令，能够独立完成项目的部署上线。"},
            // {id:7,it:"了解各种网络协议，掌握基于常见协议的网络编程"}
        ],
        addit: "",
        updataits: [],
        id: 0,
      }
      
    },
    mounted:function(){
        this.get();
    },
    methods: {
        get:function(){
            this.$http.get("findskills").then(res =>{
                this.its=res.data
                // console.log(this.its[0].id)
            })
        },
        updatait(){
            this.$http.post("updateskills",{id:this.id,it:this.updataits}).then(res =>{
                if(res.data.status==200 && res.data.message>0){
                    this.updatasync=false;
                    this.get();
                    this.$notify({
                        title: '成功',
                        message: "修改成功",
                        type: 'success',
                        position: 'bottom-right'
                    });
                }else{
                    this.$notify.error({
                        title: '错误',
                        message: '删除失败'
                    });
                }
            })
        },
        updata(id,index){
            this.updatasync = true;
            this.updataits = this.its[index].it;
            this.id=id;
            // this.index = index;
        },
        del(index){
            // console.log(index)
            this.$http.get("deleteskillsbyid/"+index).then(res =>{
                if(res.data.status==200){
                    this.get();
                    this.$notify({
                        title: '成功',
                        message: res.data.statusText,
                        type: 'success',
                        position: 'bottom-right'
                    });
                }else{
                    this.$notify.error({
                        title: '错误',
                        message: '删除失败'
                    });
                }
                // console.log(res)
            })
            this.its.splice(index,1)
        },
        addits(){
            // console.log(this.addit)
            if(this.addit != null){
                this.$http.post("insertskills",{it:this.addit}).then(res =>{
                    if(res.data.status==200 && res.data.message>0){
                        this.dialogVisible=false;
                        this.get();
                        this.$notify({
                            title: '成功',
                            message: '保存成功',
                            type: 'success',
                            position: 'bottom-right'
                        });
                    }
                })
            }else{
                this.$notify.error({
                    title: '错误',
                    message: '不能为空'
                });
            }
        },
        add(){
            this.dialogVisible=true;
            this.addit=null;
        },
        cancellation(){
            this.updatasync=false;
            // this.updataits=[];
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.updataits=[]
          })
          .catch(_ => {});
      }
    }
  }
</script>
